const editInfo = Vue.defineComponent({
    name: "editInfo",
    components: {},
    props: {
        userInfo: {
            type: String,
            required: false,
            default: "名称"
        }
    },
    setup(props, context) {
        const userInfoForm = Vue.ref(null)
        const userInfo = Vue.reactive({ // 用户信息
            form: {
                name: "",
                sex: "",
                birth: ""
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入姓名",
                        trigger: "blur"
                    }
                ],
                sex: [
                    {
                        required: true,
                        message: "请选择性别",
                        trigger: "change",
                    },
                ],
                birth: [
                    {
                        type: "date",
                        required: true,
                        message: "请选择出生日期",
                        trigger: "change",
                    },
                ],
            }
        })

        userInfo.form = JSON.parse(JSON.stringify(props.userInfo))

        const submitForm = () => {
            var data = false;
            userInfoForm.value.validate((valid) => {
                data = valid ? userInfo.form : false
            })
            return data
        }

        return {
            props,
            userInfoForm,
            userInfo,
            submitForm
        }
    },
    template: `
        <div>
            <el-form 
                ref="userInfoForm" 
                :rules="userInfo.rules"
                :model="userInfo.form" 
                label-width="120px"
            >
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="userInfo.form.name"></el-input>
                </el-form-item>

                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="userInfo.form.sex">
                        <el-radio label="1">男</el-radio>
                        <el-radio label="0">女</el-radio>
                        <el-radio label="2">未知</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="出生日期" prop="birth">
                    <el-date-picker 
                        v-model="userInfo.form.birth" 
                        value-format="YYYY-MM-DD"
                        type="date" 
                        placeholder="选择出生日期"
                    ></el-date-picker>
                </el-form-item>

            </el-form>
        </div>
    `
})
